import React from "react";
import LazyLoad from "react-lazyload";
import placeholder from "@/assets/placeholder.jpg";
import styles from "./Repository.less";

export function Repository(props) {
  const { rank, repository: repos } = props;
  return (
    <div className={styles.item}>
      <h2 className="text-center">#{rank}</h2>
      <div className="text-center">
        <LazyLoad placeholder={<img src={placeholder} alt="加载中" />}>
          <img src={repos.owner.avatar_url} alt={repos.name} />
        </LazyLoad>
      </div>
      <h4>
        <a href={repos.html_url} target="_blank" rel="noopener noreferrer">
          {repos.full_name}
        </a>
      </h4>
      <div>
        <i className="fa fa-user" style={{ color: "rgb(255, 191, 116)" }} />
        <a
          href={repos.owner.html_url}
          target="_blank"
          rel="noopener noreferrer"
        >
          {repos.owner.login}
        </a>
      </div>
      <div>
        <i className="fa fa-star" style={{ color: "rgb(255, 215, 0)" }} />
        {repos.stargazers_count} stars
      </div>
      <div>
        <i
          className="fa fa-code-fork"
          style={{ color: "rgb(129, 195, 245)" }}
        />
        {repos.forks} forks
      </div>
      <div>
        <i className="fa fa-warning" style={{ color: "rgb(241, 138, 147)" }} />
        {repos.open_issues} Open issues
      </div>
    </div>
  );
}
export default Repository;
